<template>
  <div>
    <!-- 头部开始 -->
    <div class="big_background">
      <div class="big_background_view_title">个人中心</div>
      <div class="big_background_user">
        <div class="user_avatar">
          <img src="/img/user_img/avatar.png" alt="" />
          <template v-if="islogin == false || islogin == null">
            <router-link to="/login" href="javascript:;">立即登录</router-link>
          </template>
          <template v-else>
            <span>{{ unickname }}</span>
          </template>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="my_order">
        <div class="my_order_title">
          <a href="javascript:;">
            <span>我的订单</span>
            <span class="qbdd">全部订单</span>
            <img src="../assets/images/go_guige.png" alt="" />
          </a>
        </div>
        <div class="my_order_content">
          <ul>
            <li>
              <a href="javascript:;">
                <img src="../assets/images/qianbao.png" alt="" />
                <p>待支付</p>
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <img src="../assets/images/dfh.png" alt="" />
                <p>待发货</p>
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <img src="../assets/images/dsh.png" alt="" />
                <p>待收货</p>
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <img src="../assets/images/tuikuan.png" alt="" />
                <p>退款/售后</p>
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="my_other">
        <ul>
          <li>
            <a href="javascript:;">
              <div class="my_other_left">
                <img src="../assets/images/grzl.png" alt="" />
                <span>个人资料</span>
              </div>
              <div class="my_other_right">
                <img src="../assets/images/go_guige.png" alt="" />
              </div>
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <div class="my_other_left">
                <img src="../assets/images/shoucang.png" alt="" />
                <span>我的收藏</span>
              </div>
              <div class="my_other_right">
                <img src="../assets/images/go_guige.png" alt="" />
              </div>
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <div class="my_other_left">
                <img src="../assets/images/address.png" alt="" />
                <span>收货地址</span>
              </div>
              <div class="my_other_right">
                <img src="../assets/images/go_guige.png" alt="" />
              </div>
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <div class="my_other_left">
                <img src="../assets/images/callme.png" alt="" />
                <span>联系我们</span>
              </div>
              <div class="my_other_right">
                <img src="../assets/images/go_guige.png" alt="" />
              </div>
            </a>
          </li>
          <li>
            <a @click="exit" href="javascript:;">
              <div class="my_other_left">
                <img src="../assets/images/exit.png" alt="" />
                <span>退出登录</span>
              </div>
              <div class="my_other_right">
                <img src="../assets/images/go_guige.png" alt="" />
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import { mapState } from "vuex";
import Footer from "../components/Footer.vue";
export default {
  components: { Footer },
  methods: {
    exit() {
      sessionStorage.clear();
      // this.$router.push("/login");
      location.reload();
    },
  },

  computed: {
    ...mapState(["islogin", "unickname"]),
  },
};
</script>
<style scoped src="../assets/css/me.css"></style>
<style lang="scss" scoped></style>
